<style>
	.edit-box {
		position: fixed;
		top: 0px !important;
		right: 0px !important;
		left: 0px !important;
		bottom: 0px !important;
		z-index: 100;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	
	.edit-box-con {
		width: 665px;
		height: auto;
		margin: 0 auto;
		z-index: 100;
		padding: 10px;
		background: #fff;
		position: relative;
		border: 1px solid #e5e5e5;
	}
	
	.tit {
		width: 100%;
		height: 45px;
		line-height: 45px;
		text-align: center;
	}
	
	.detail {
		width: 100%;
		flex: 1;
		padding: 20px;
		box-sizing: border-box;
		flex-direction: column;
	}
	
	.el-icon-error {
		position: absolute;
		right: 10px;
		top: 10px;
		cursor: pointer;
		color: #666;
		font-size: 20px;
	}
	
	.lod {
		width: 100%;
		display: flex;
	}
	
	.uplod-img {
		flex: 1;
		margin-left: 20px;
	}
	
	.el-upload-list--picture-card .el-upload-list__item,
	.el-upload--picture-card {
		width: 100px;
		height: 100px;
	}
	
	.textarea {
		width: 400px;
		height: 100px;
		resize: none;
		margin-left: 50px;
		border-radius: 5px;
		padding: 10px;
		border: 1px solid #e5e5e5;
		display: inline-block;
	}
	
	.toolbar-txt {
		display: flex;
	}
	
	.el-upload--picture-card {
		line-height: 100px;
	}
	
	.ait {
		width: 100%;
		
	}
	
	.imgBox {
		width: 50px;
	    height: 50px;
	    display: -webkit-box;
	    display: -ms-flexbox;
	    display: flex;
	    float: left;
	    margin: 0 auto;
	    cursor: pointer;
	    -webkit-box-pack: center;
	    -ms-flex-pack: center;
	    justify-content: center;
	    -webkit-box-align: center;
	    -ms-flex-align: center;
	    align-items: center;
	    position: relative;
	}
	
	.imgBox>img {
	    max-width: 3rem;
	    max-height: 3rem;
	    margin: 0 auto;
	}
	.imgBox>span{
		position: absolute;
	    bottom: 0;
	    left: 0;
	    font-size: 12px;
	    height: 18px;
	    line-height: 18px;
	    text-align: center;
	    width: 100%;
	    color: #fff;
	    background: rgba(0,0,0,.5);
	}
	.dict{
		width: 160px;
		padding: 10px;
		min-height: 200px;
		position: fixed;
		color: #606266;
		background: #fff;
		text-align: center;
		border: 1px solid #E5E5E5;
	}
</style>
<template>
	<section class="repair-box">
		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
			<el-row>
				<el-input style="width:247px" placeholder="创建人手机号/维修工姓名" v-model="keyword" clearable @keyup.enter.native="getRecordList" />
				<!--<input type="tetx" @keyup.enter="search"/>-->
				<el-button type="primary" @click="search" >搜索</el-button>
			</el-row>
		</el-col>
		<el-table :data="recordList" highlight-current-row ref="multipleTable" style="width: 120%;">
			<el-table-column type="index" label="序号" width="60"></el-table-column>
			<el-table-column prop="creator" label="创建人"></el-table-column>
			<el-table-column prop="repairName" label="指派维修工姓名"></el-table-column>
			<el-table-column prop="project" label="施工项目"></el-table-column>
			<el-table-column prop="description" label="描述" width="200" >
				<template scope="scope">
					<span 
						style="width: 100%;height: 100%;display: inline-block;cursor: pointer;padding: 10px;" 
						@mouseout="changeOut"
						@mouseover="changeStyle($event,scope.row.description)">
						{{scope.row.description}}
					</span>
				</template>
			</el-table-column>
			<el-table-column prop="imageList" label="图片" width="200">
				<template scope="scope" v-if="scope.row.imageList.split(',').length>0">
					<div class="ait">
						
						<div class="imgBox"  v-for="(item,index) in scope.row.imageList.split(',')">
							<img  :src="item"  @click="viewBigIcon(item)"/>
							
						</div>
					</div>
				</template>
				<template>-</template>
			</el-table-column>
			<el-table-column prop="operator" label="编辑人"></el-table-column>
			<el-table-column prop="lastUpdateTime" label="编辑时间"></el-table-column>
			<el-table-column label="操作">
				<template scope="scope">
					<el-button size="mini" @click="doEdit(scope.row)" type="info" plain>编辑</el-button>
					<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)" plain>删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-dialog :visible.sync="viewBig" width="500px">
			<img :src="bigIcon" style="width:500px;margin:-55px -20px -40px" />
		</el-dialog>
		<div class="block" align="right">
			<br>
			<el-pagination 
				@current-change="handleCurrentChange" 
				layout=" prev, pager, next" 
				:page-size="20"
				:total="pageCount" :current-page.sync="page" >
			</el-pagination>
		</div>
		<div class="edit-box" v-if="showEditBox">
			<div class="edit-box-con">
				<p class="tit"> 编辑施工数据</p>
				<i class="el-icon-error" @click="close"></i>
				<div class="detail">
					<el-col :span="24" class="toolbar" style="margin-bottom: 30px;">
						维修工*
						<el-select v-model="repairName" placeholder="请选择" style="margin-left: 35px;" @change="setRepairId">
							<el-option v-for="item in repairList" :key="item.repairId" :label="item.name" :value="item.name">
							</el-option>
						</el-select>
					</el-col>
					<el-col :span="24" class="toolbar" style="margin-bottom: 30px;">
						施工项目*
						<el-input v-model="project" maxlength="20" style="width:300px; margin-right: 10px;margin-left: 20px;">
						</el-input>
					</el-col>

					<el-col :span="24" class="toolbar-txt" style="margin-bottom: 30px;">
						<span>描述*</span>
						<textarea class="textarea" maxlength="200" v-model="description"></textarea>
					</el-col>
					<el-col :span="24" class="lod">
						上传图片*
						<div class="uplod-img">
							<el-upload multiple :limit="10" :action="uploadModel.uploadUrl" list-type="picture-card" :on-preview="uploadModel.onPreview" :on-remove="uploadModel.onRemove" :file-list="uploadModel.targetList" :on-progress="uploadModel.progress" :on-error="uploadModel.error" :on-exceed="uploadModel.exceed" :http-request="uploadFile" :before-upload="uploadModel.onBefore">
								<i class="el-icon-plus"></i>
							</el-upload>
						</div>
					</el-col>
					<el-col :span="24" class="toolbar" style="margin-top: 10px;text-align: center;">
						<el-button type="primary" @click="saveStore()" style="margin: 0 auto;">保存</el-button>
					</el-col>
				</div>
			</div>
		</div>
	</section>

</template>

<script>
	import * as Api from "@/api/Api.js";
	import * as Config from "@/api/Config.js";
	export default {
		data() {
			return {
				viewBig:false,
				bigIcon: "",
				repairId: '',
				repairName: '',
				recordList: null,
				page: 1,
				pageSize: 20,
				keyword: '',
				pageCount: 0,
				repairData: {},
				showEditBox: false,
				project: '',
				description: '',
				repairList: '',
				loadding: false,
				showStatus: '1',
				repairMobile: '', // 电话号码
				repairId: '',
				recordId: '',
				list: [{
		          src: 'https://placekitten.com/600/400',
		          w: 600,
		          h: 400
		        }, {
		          src: 'https://placekitten.com/1200/900',
		          w: 1200,
		          h: 900
		        }],
				uploadModel: {
					disabled: false,
					uploadUrl: "",
					targetList: [],
					fileList: [],
					onRemove: (file, targetList) => {
						if(this.uploadModel.fileList && this.uploadModel.fileList.length > 0) {
							this.uploadModel.fileList.forEach((item, index) => {
								if(item.url == file.url) {
									console.log(1)
									this.uploadModel.fileList.splice(index, 1)
								} else if(item.uid == file.uid) {
									console.log(45)
									this.uploadModel.fileList.splice(index, 1)
								}
							})
						}
					},
					error: () => {
						this.loadding = false;
					},
					// 上传大于限制时
					exceed: () => {
						this.$message.error('最多只能上传10张图片');
					},
					progress: () => {
						this.loadding = true;
					}

				}
			}
		},
		methods: {
			viewBigIcon(url) {
				this.bigIcon = url;
				this.viewBig = true;
			},
			search(){
				this.page =  1
				this.getRecordList()
			},
			changeStyle(event,value){
				console.log()
				let distDiv = document.createElement('div')
				distDiv.className = 'dict'
				distDiv.id = 'dictBox'
				document.body.appendChild(distDiv)
				distDiv.style.left = event.pageX + 'px'
				distDiv.style.top = (event.pageY-document.documentElement.scrollTop) + 'px'
				distDiv.innerHTML = value
			},
			changeOut() {
				document.body.removeChild(document.getElementById('dictBox'))
			},
			setRepairId(value) {
				console.log(value)
				this.repairList.forEach((item) => {
					if(item.name == value) {
						console.log(item)
						this.repairId = item.repairId
						return;
					}
				})

			},
			uploadFile(fie) {
				console.log(fie.file)
				let formData = new FormData() 
				
				formData.append('file', fie.file)
				Api.uploadMitImg(formData).then(res => {
					if(res.data.status == 200) {
						let obj = {
							uid: fie.file.uid,
							url: res.data.data.filename
						}
						this.uploadModel.fileList.push(obj)
						console.log(this.uploadModel.fileList)
					}
				})

			},
			recordTargetId(){
				if(!this.repairId){
					
					this.repairList.forEach((item) => {
						console.log(item)
						if(item.name == this.repairName) {
							this.repairId=  item.repairId;
						}
					})
				}
			},
			saveStore() {
				let attr = !this.repairName ? '请选择维修工' : !this.project ? '请填写施工项目' : !this.description ? '请填写描述' : !this.uploadModel.fileList.length ? '请至少上传一张图片' : ''

				if(attr) {
					this.$message({
						message: attr,
						type: 'error'
					});
					return
				}
				let imgList = this.uploadModel.fileList.map((item) => {
					return item.url
				})
				this.recordTargetId()
				let params = {
					id: this.recordId,
					repairName: this.repairName,
					repairId: this.repairId,
					project: this.project,
					description: this.description,
					imageList: imgList.join(',')
				}
				Api.updateRecord(this, params).then(res => {
					console.log(res)
					if(res.retCode) {
						this.$message({
							showClose: true,
							message: '编辑成功',
							type: 'success'
						});
						this.showEditBox = false
						this.getRecordList()
					}
				})

			},
			close() {
				this.showEditBox = false
			},
			doEdit(item) {
				this.project = item.project
				this.recordId = item.id
				this.description = item.description
				console.log(item)
				this.repairName = item.repairName
				this.showEditBox = true
				console.log(item.imageList.split(','))
				this.uploadModel.targetList = []
				this.uploadModel.fileList = []
				if(item.imageList.length > 0) {
					item.imageList.split(',').forEach((item) => {
						let dt = {
							name: "1.png",
							url: item
						};
						this.uploadModel.targetList.push(dt)
						let obj = {
							uid: '',
							url: item
						}
						this.uploadModel.fileList.push(obj)

					})

				}

			},
			getRecordList() {
				let params = {
					page: this.page-1,
					pageSize: this.pageSize,
					keyword: this.keyword
				}
				Api.getRecordList(this, params).then(res => {
					console.log(res)
					if(res.retCode) {
						this.pageCount = res.data.page.total

						this.recordList = res.data.recordList
					} else {
						this.$message("获取数据失败");
					}

				});
			},
			getRepairList() {
				let params = {
					page: 0,
					pageSize: 20,
					keyword: ''
				}
				Api.getRepairList(this, params).then(res => {
					console.log(res)
					if(res.retCode) {
						if(res.data.repairList && res.data.repairList.length > 0) {
							this.repairList = res.data.repairList.filter((item) => {
								if(item.showStatus) {
									return item
								}
							})
						}
						console.log(this.repairList)
					} else {
						this.$message("获取数据失败");
					}

				});
			},
			handleDelete(index, item) {
				this.$confirm("确定删除此施工数据?", "提示", {
						confirmButtonText: "确定",
						cancelButtonText: "取消",
						type: "warning"
					})
					.then(() => {
						let params = {
							recordId: item.id
						}
						Api.deleteRecord(this, params).then(res => {
							console.log(res)
							if(res.retCode) {
								this.$message({
									showClose: true,
									message: '删除成功',
									type: 'success'
								});
							}
							res.retCode ? this.getRecordList() : this.$message("删除失败");
						})

					})
					.catch(() => {
						this.$message({
							type: "info",
							message: "已取消删除"
						});
					});
			},
			handleCurrentChange(val) {
				this.page = val;
				this.getRecordList();
			}
		},
		mounted() {
			// 获取施工数据
			this.getRecordList()
			// 	获取修理工数据
			this.getRepairList()
			this.uploadModel.uploadUrl = Config.g_upload_url;
		},
		watch: {
			keyword(val) {
				if(!val) {
					this.getRecordList()
				}
			}
		}

	}
</script>